import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { CommonHeader } from "../Utils";

<CommonHeader />

<Meta title="React Spaces/Useful events" />

## Useful events

### onResizeStart

Triggered when a mouse/touch resize starts. The resize action can be cancelled by returning `false` from the event handler.

#### Applies to

`<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />`

#### Parameters

- **resizeType**: "resize-left" | "resize-top" | "resize-right" | "resize-bottom" - Type of resize operation started

#### Example

```tsx
const Example = () => 
	<LeftResizable 
		onResizeStart={(resizeType) => /* logic to determine if resizing should be possible */}>
	...
	</LeftResizable>
```

### onResizeEnd

Triggered at the end of a resize action providing the new size (in pixels) of the space.

#### Applies to

`<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />`

#### Parameters

- **newSize**: number - New size of space. For `<LeftResizable />` and `<RightResizable />` 
this will be the width, for `<TopResizable />` and `<BottomResizable />` this will be the height
- **domRect**: DOMRect - Final dimensions of space
- **resizeType**: "resize-left" | "resize-top" | "resize-right" | "resize-bottom" - Type of resize 
operation started

#### Example

The likely scenario where you need to use this is to keep the size of the space controlled 
in state:

```tsx
const Example = () => {
	const [ size, setSize ] = useState(200);

	return (
		<ViewPort>
			<LeftResizable 
				onResizeEnd={(newSize, domRect, resizeType) => setSize(newSize)}>
			  ...
			</LeftResizable>
		</ViewPort>
	)
}
```

### Element events

Spaces allow you to bind to the following React component events.

- `onClick`
- `onDoubleClick`
- `onMouseDown`
- `onMouseEnter`
- `onMouseLeave`
- `onMouseMove`
- `onTouchStart`
- `onTouchMove`
- `onTouchEnd`

#### Applies to

`<Fill />` `<Left />` `<Top />` `<Right />` `<Bottom />` `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />` `<Positioned />` `<Custom />`


